﻿@model int

<form id="chat" runat="server" class="form-horizontal">
	<h3>Chat</h3>
	<hr>
	<div id="chat-box" class="container-fluid">
		<div class="row-fluid alert alert-info">
			<div class="span12">	
				<ul id="list-messages">
					<!-- messages will appear here -->
				</ul>
			</div>
		</div>
		<div class="row-fluid">
			<div class="input-append">
				<input type="text" class="span8" id="text-message">
				<input type="button" class="btn" id="send-message" value="Send">
			</div>
		</div>
	</div>
</form>

<script type="text/javascript">
	$(function () {

		var group = '@(Model)';
		var chatConnection = $.connection.gameHub;
		var user = '@(Context.User.Identity.Name)';

		chatConnection.client.addMessage = function (message) {
			$('#list-messages').prepend('<li>' + message + '</li>');
		};

		$("#send-message").click(function() {
			chatConnection.server.send(group, user, $('#text-message').val());
			$('#text-message').val("");
			
		});

		$('#text-message').bind('keydown', function (e) {

			if (e.keyCode === 13) {  // 13 is enter key
				chatConnection.server.send(group, user, $('#text-message').val());
				e.preventDefault();
				$('#text-message').val("");
			}

		});

		$(document).keypress(function(e) {
			if(e.which == 13) {
				chatConnection.server.send(group, user, $('#text-message').val());
			}
		});

		$.connection.hub.start().done(function() {
			chatConnection.server.join(group)
		} );
	});
</script>